<script>
	function formatWithChineseUnit(num) {
		if (num >= 100000000) {
			return numeral(num / 100000000).format("0,0.00") + " M";
		}
		// else if (num<100000000&&num >= 1000000) {
		// 	return numeral(num / 10000).format("0,0.00") + "万";
		// }
		else if (num >= 100000) {
			return numeral(num / 1000).format("0,0.00") + " k";
		} else {
			return numeral(num).format("0,0.00");
		}
	}
	import {
		baseEnv
	} from '@/utils/config.js';
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		async onLaunch() {
			this.initWebSocket()
		},
		computed: {
			...mapState(['token', 'klinetypeCurrency', 'klineDateTime'])
		},
		onShow: async function() {},
		methods: {
			...mapMutations(['setCurrencyId']),
			initWebSocket() {
				let that = this;
				uni.connectSocket({
					url: `wss://coinspace.top/socket.io/?EIO=3&transport=websocket`,
					// url: `ws://192.168.1.100:2000/socket.io/?EIO=3&transport=websocket`,
					header: {
						'content-type': 'application/json'
					},
					success: () => {
						console.log('链接成功');
					}
				});
				uni.onSocketMessage((res) => {
					try {
						// console.log(res.data);
						this.getSocketMsg(res.data);
					} catch (err) {
						console.log(err.message, '发生错误');
					}
				});

				uni.onSocketError(function(res) {
					console.log(res, 'WebSocket连接打开失败，请检查！');
				});

				uni.onSocketClose(function(res) {
					console.log(res, 'websocket 已关闭');
					uni.closeSocket({
						success: () => {
							console.log('关闭成功');
							that.initWebSocket();
						}
					});
				});
			},
			getSocketMsg(reData) {
				// 监听到服务器消息
				let data = JSON.parse(reData.slice(2));
				// console.log(data)
				let dataType = data[0];

				let klinetypeCurrency = this.klinetypeCurrency;

				//详情
				if (dataType == 'daymarket' && data[1].symbol === klinetypeCurrency && data[1].period == '1day') {
					// data[1].quota = formatWithChineseUnit(data[1].volume * data[1].now_price);
					// data[1].now_price = formatWithChineseUnit(data[1].now_price);
					data[1].isType = data[1].change.slice(0, 1);
					// data[1].high = formatWithChineseUnit(data[1].high);
					// data[1].low = formatWithChineseUnit(data[1].low);
					// data[1].volume = formatWithChineseUnit(data[1].volume);
					uni.$emit('daymarket', data[1]);

					// this.setNowPrice(data[1].now_price);
				}
				// console.log(this.klineDateTime);
				//K线图
				if (data[1].symbol === klinetypeCurrency && dataType == 'kline' && data[1].period == this.klineDateTime) {
					data[1].timestamp = data[1].time;
					// console.log(data[1]);
					uni.$emit('chart', data[1]);
				}

				//订单表
				if (dataType == 'market_depth' && data[1].symbol === klinetypeCurrency) {
					uni.$emit('market_depth', data[1]);
				}

				if (dataType == 'market_detail' && data[1].symbol === klinetypeCurrency) {
					this.setCurrencyId(data[1].currency_id);
				}

				//all
				if (dataType == 'daymarket' && data[1].period == '1day') {
					// console.log(data[1]);
					data[1].isType = data[1].change.slice(0, 1);
					uni.$emit('daymarketAll', data[1]);
				}

				// 市场
				if ((dataType == 'daymarket' || dataType == 'kline') && data[1].period == '1day') {
					data[1].timestamp = data[1].time;
					data[1].isType = data[1].change.slice(0, 1);
					// console.log(data[1]);
					uni.$emit('automarket', data[1]);
				}

				// 市场
				// if (dataType == 'daymarket' && data[1].period == '1day') {
				// 	// console.log('data[1]', data[1]);
				// 	data[1].timestamp = data[1].time;
				// 	data[1].isType = data[1].change.slice(0, 1);
				// 	// 自选
				// 	this.autoSelectList.forEach((item, index) => {
				// 		if (item.currency_id == data[1].currency_id) {
				// 			item['currency_name'] = data[1].currency_name;
				// 			item['legal_name'] = data[1].legal_name;
				// 			item['now_price'] = data[1].now_price;
				// 			item['isType'] = data[1].isType;
				// 			item['change'] = data[1].change;
				// 		}
				// 	});
				// 	this.setAutoSelectList(this.autoSelectList);
				// 	// 市场
				// 	this.marketList.forEach((item, index) => {
				// 		if (item.id == data[1].currency_id) {
				// 			item['currency_name'] = data[1].currency_name;
				// 			item['legal_name'] = data[1].legal_name;
				// 			item['now_price'] = data[1].now_price;
				// 			item['isType'] = data[1].isType;
				// 			item['change'] = data[1].change;
				// 		}
				// 	});
				// 	this.setMarketList(this.marketList);
				// }
			}
		},
		mounted() {}
	}
</script>

<!-- //    var script = document.createElement('script');
	//    script.src = "https://cdn.bootcss.com/babel-polyfill/7.4.3/polyfill.min.js";
	//    document.body.appendChild(script);
	//    script.onload = function() {
	//        console.log('js onload')
	//    }
	// var script1 = document.createElement('script1');
	// script1.src = "https://www.yunpian.com/static/official/js/libs/riddler-sdk-0.2.2.js?t=20210720";
	// document.body.appendChild(script1);
	// script1.onload = function() {
	//     console.log('js onload1')
	// }
 -->
<style lang="scss">
	uni-page-body,
	html,
	body {
		height: 100%;
		background: #fff;
	}

	// uni-tabbar .uni-tabbar-border {
	//     position: absolute;
	//     left: 0;
	//     top: 0;
	//     width: 100%;
	//     height: 0px;
	//     -webkit-transform: scaleY(.5);
	//     transform: scaleY(.5);
	//     background-color: rgba(0, 0, 0, 0.13) !important;
	// }
	uni-tabbar.uni-tabbar-bottom .uni-tabbar {
		background: #fff !important;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(147, 147, 147, 0.15) !important;
		// box-shadow: 0px -1rpx 0px 0px #E7EAED !important;
	}

	.txt {
		overflow: hidden; //超出隐藏
		white-space: nowrap; //不折行
		text-overflow: ellipsis; //溢出显示省略号
	}

	.ml {
		margin-left: auto;
	}

	.txttwo {
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		/* 超出几行省略 */
		overflow: hidden;
	}

	.ptong {
		padding-left: 20rpx;
		padding-right: 20rpx;
	}

	// .uni-mask {
	// 	background: rgba(0,0,0,1) !important;
	// }
	.hright {
		position: absolute;
		right: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.jisuanqi {
			width: 33rpx;
			height: 35rpx;
			position: relative;
			top: 4rpx;
		}

		text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #FD864F;
			display: inline-block;
		}
	}

	uni-image {
		pointer-events: auto !important;
	}

	@import "uview/index.scss";
	// #ba0603 统一色值
</style>